<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .big {
            width: 900px;
            position: absolute;
            left: 0;
            right: 0;
            top: 20px;
            margin: auto;
            border: 1px solid #337ab7;
            border-radius: 5px;

        }

        .tb {
            width: 900px;
            height: 40px;
            background-color: #337ab7;
            color: #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding-top: 10px;
            padding-left: 10px;
        }

        .sx {
            width: 900px;
            height: 50px;
            padding-top: 10px;
            padding-left: 10px;
        }

        .sx input,
        select {
            width: 200px;
            height: 30px;
            border: #ededed 1px solid;
            padding-left: 5px;
            border-radius: 3px;
            margin-right: 20px;
        }

        .sx span button {
            width: 50px;
            height: 30px;
            border-radius: 3px;
            border: 0;
            color: #fff;
        }

        .sc,
        .bj {
            width: 50px;
            height: 30px;
            border-radius: 3px;
            border: 0;
            color: #fff;
        }

        th,
        td {
            border: 1px solid #ededed;
            padding-left: 5px;
        }

        thead th {
            width: 100px;
            height: 30px;
        }

        td {
            height: 50px;
        }

        tbody tr:nth-child(2n-1) {
            background-color: #f9f9f9;
        }

        .mtk {
            width: 250px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 11;
            display: none;
        }
        .mtkk {
            width: 250px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 11;
            display: none;
        }

        .mc {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.2);
            z-index: 10;
            display: none;
        }
    </style>
</head>

<body>
    <div class="big">
        <p class="tb">英雄列表管理</p>
        <p class="sx">
            <input type="text" class="xm" placeholder="输入英雄名称">
            <select>
                <option value="">--选择性别--</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <input type="text" class="nl" placeholder="输入年龄">
            <span>
                <button style="background-color: #5cb85c;" onclick="ss()">搜索</button>
                <button style="background-color: #f0ad4e;" onclick="cz()">重置</button>
                <button onclick="add()" style="background-color: #337ab7;">添加</button>
            </span>
        </p>
        <div class="mtk">
            姓名：<input type="text" class="xmm"><br>
            性别：<input type="radio" value="男" class="xbb" name="x" checked>男
            <input type="radio" value="女" class="xbb" name="x">女<br>
            年龄：<input type="text" class="nll"><br>
            <button onclick="tj()">添加</button>&nbsp;<button onclick="qx()">取消</button>
        </div>
        <div class="mtkk">
            姓名：<input type="text" class="xxmm"><br>
            性别：<input type="radio" value="男" class="xxbb" name="xn" id="nan" checked>男
            <input type="radio" value="女" class="xxbb" name="xn" id="nv">女<br>
            年龄：<input type="text" class="nnll"><br>
            <button onclick="qd(this)">确定</button>&nbsp;<button onclick="qxx()">取消</button>
        </div>
        <div class="mc"></div>
        <table cellspacing="0">
            <thead align="left">
                <tr>
                    <th>编号</th>
                    <th style="width: 200px;">英雄名称</th>
                    <th style="width: 200px;">英雄性别</th>
                    <th>年龄</th>
                    <th style="width: 300px;">操作区</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>

</html>
<script>
    var xm = document.querySelector('.xm')
    var xmm = document.querySelector('.xmm')
    var xxmm = document.querySelector('.xxmm')
    var mtk = document.querySelector('.mtk')
    var mtkk = document.querySelector('.mtkk')
    var zzc = document.querySelector('.mc')
    var nl = document.querySelector('.nl')
    var nll = document.querySelector('.nll')
    var nnll = document.querySelector('.nnll')
    var xb = document.querySelector('select')
    var xbb = document.querySelector('.xbb')
    var xxbb = document.querySelector('.xxbb')
    var nan = document.querySelector('#nan')
    var nv = document.querySelector('#nv')
    var tbody = document.querySelector('tbody')
    var asd=0
    var qqq=''
    var arr = [
        {
            xm: '大乔',
            xb: '男',
            nl: 18
        },
        {
            xm: '小乔',
            xb: '女',
            nl: 20
        },
        {
            xm: '鲁班',
            xb: '男',
            nl: 48
        },
        {
            xm: '后羿',
            xb: '女',
            nl: 28
        },
        {
            xm: '廉颇',
            xb: '男',
            nl: 28
        },
    ]
    var brr = [
        {
            xm: '大乔',
            xb: '男',
            nl: 18
        },
        {
            xm: '小乔',
            xb: '女',
            nl: 20
        },
        {
            xm: '鲁班',
            xb: '男',
            nl: 48
        },
        {
            xm: '后羿',
            xb: '女',
            nl: 28
        },
        {
            xm: '廉颇',
            xb: '男',
            nl: 28
        },
    ]
    function xr() {
        tbody.innerHTML = ''
        for (i = 0; i < arr.length; i++) {
            var tr = document.createElement('tr')
            tr.innerHTML = `
            <td>${i + 1}</td>
            <td>${arr[i].xm}</td>
            <td>${arr[i].xb}</td>
            <td>${arr[i].nl}</td>
            <td><button class="sc" style="background-color: #d9534f; margin-right: 5px;" onclick='sc(this)'>删除</button><button class="bj" style="background-color: #5bc0de;" onclick='bj(${i})'>编辑</button></td>
            `
            tbody.appendChild(tr)
        }
    }
    function xr2() {
        tbody.innerHTML = ''
        for (i = 0; i < brr.length; i++) {
            var tr = document.createElement('tr')
            tr.innerHTML = `
            <td>${i + 1}</td>
            <td>${brr[i].xm}</td>
            <td>${brr[i].xb}</td>
            <td>${brr[i].nl}</td>
            <td><button class="sc" style="background-color: #d9534f; margin-right: 5px;" onclick='sc(this)'>删除</button><button class="bj" style="background-color: #5bc0de;" onclick='bj(${i})'>编辑</button></td>
            `
            tbody.appendChild(tr)
        }
    }
    function xr3() {
        tbody.innerHTML = ''
            for (i = 0; i < crr.length; i++) {
            var tr = document.createElement('tr')
            tr.innerHTML = `
            <td>${i + 1}</td>
            <td>${crr[i].xm}</td>
            <td>${crr[i].xb}</td>
            <td>${crr[i].nl}</td>
            <td><button class="sc" style="background-color: #d9534f; margin-right: 5px;" onclick='sc(this)'>删除</button><button class="bj" style="background-color: #5bc0de;" onclick='bj(${i})'>编辑</button></td>
            `
            tbody.appendChild(tr)
            }
    }
    function xr4() {
        tbody.innerHTML = ''
            for (i = 0; i < drr.length; i++) {
            var tr = document.createElement('tr')
            tr.innerHTML = `
            <td>${i + 1}</td>
            <td>${drr[i].xm}</td>
            <td>${drr[i].xb}</td>
            <td>${drr[i].nl}</td>
            <td><button class="sc" style="background-color: #d9534f; margin-right: 5px;" onclick='sc(this)'>删除</button><button class="bj" style="background-color: #5bc0de;" onclick='bj(${i})'>编辑</button></td>
            `
            tbody.appendChild(tr)
            }
    }
    function xr5() {
        tbody.innerHTML = ''
            for (i = 0; i < err.length; i++) {
            var tr = document.createElement('tr')
            tr.innerHTML = `
            <td>${i + 1}</td>
            <td>${err[i].xm}</td>
            <td>${err[i].xb}</td>
            <td>${err[i].nl}</td>
            <td><button class="sc" style="background-color: #d9534f; margin-right: 5px;" onclick='sc(this)'>删除</button><button class="bj" style="background-color: #5bc0de;" onclick='bj(${i})'>编辑</button></td>
            `
            tbody.appendChild(tr)
            }
    }
    xr()
    function add() {
        mtk.style.display = 'block'
        zzc.style.display = 'block'
    }
    function qx() {
        mtk.style.display = 'none'
        zzc.style.display = 'none'
    }
    function tj() {
        arr.push({
            xm: xmm.value,
            xb: xbb.value,
            nl: nll.value
        })
        mtk.style.display = 'none'
        zzc.style.display = 'none'
        xmm.value = ''
        nll.value = ''
        xr()
    }
    function cz() {
        xr2()
    }
    function ss() {
        if (xm.value == '' && xb.value == '' && nl.value == '') {
            xr()
            crr=[]
            drr=[]
            err=[]
        } else {
            crr = arr.filter(function (ele, i) {
                return ele.xm == xm.value
            })
            drr = arr.filter(function (ele, i) {
                return ele.xb == xb.value
            })
            err = arr.filter(function (ele, i) {
                return ele.nl == nl.value
            })
            if(crr.length>=1){
                xr3()
            }
            if(drr.length>=1){
                xr4()
            }
            if(err.length>=1){
                xr5()
            }
            console.log(crr);   
            console.log(drr);   
            console.log(err);   
        }
    }
    function bj(t){
        mtkk.style.display = 'block'
        zzc.style.display='block'
        xxmm.value=arr[t].xm
        if(arr[t].xb=='男'){
            nan.checked=true
        }else{
            nv.checked=true
        }
        nnll.value=arr[t].nl
        asd=t
    }
    function qxx() {
        mtkk.style.display = 'none'
        zzc.style.display='none'
    }
    function qd(a) {
        if(nan.checked==true){
            qqq='男'
        }else{
            qqq='女'
        }
        arr.splice(asd,1,{
            xm:xxmm.value,
            xb:qqq,
            nl:nnll.value
        })
        mtkk.style.display = 'none'
        zzc.style.display='none'
        xr() 
    }
    function sc(a){
        tbody.removeChild(a.parentNode.parentNode)
    }
    
</script>